<template>
	<view class="home">
		<!-- tab切换部分 -->
		<header-main
			:index="pageObj.tabIndex"
			:tabList="pageObj.tabList"
			@tabClick="tabClick">
		</header-main>
		<swiper
			class="body-swiper"
			:style="{height: pageObj.screenHeight + 'px'}"
			:current="pageObj.tabIndex"
			@change="bodySwiperChange">
			
			<!-- 首页 -->
			<swiper-item class="body-swiper-item">
				<view class="block no-top-radius">
					<!-- 广告图 -->
					<swiper
						class="swiper-image"
						indicator-dots
						circular
						autoplay
						interval="3000">
						<swiper-item v-for="item in dataObj.homeObj.bannerList" :key="item.id">
							<image class="swiper-image" mode="aspectFill" :src="item.img"></image>
						</swiper-item>
					</swiper>
					<!-- 公告 -->
					<view class="notice">
						<view class="date">{{pageObj.todayDate.month}}月{{pageObj.todayDate.day}}日</view>
						<swiper
							class="swiper-text"
							circular
							autoplay
							vertical="true"
							display-multiple-items="2"
							interval="3500">
							<swiper-item class="swiper-text-item ellipsis-1" v-for="item in dataObj.homeObj.noticeList" :key="item.id">{{item.title}}</swiper-item>
						</swiper>
					</view>
				</view>
				<view class="block">
					<view class="header">
						<span>培训服务</span>
					</view>
					<view class="category">
						<view class="category-item" :class="dataObj.homeObj.trainCatalogIndex === idx ? 'selected' : ''" v-for="(item, idx) in dataObj.homeObj.trainList" :key="item.id" @click="onCatalogsTap('homeObj.trainCatalogIndex', idx)">{{item.name}}</view>
					</view>
					<swiper
						class="swiper-train"
						next-margin="124rpx"
						circular
						:current="dataObj.homeObj.trainCatalogIndex"
						@change="trainCatalogChange">
						<swiper-item v-for="item in dataObj.homeObj.trainList" :key="item.id">
							<view class="swiper-train-item">
								<image class="train-image" :src="item.image_url"></image>
								<view class="train-tips">{{item.name}}</view>
								<view class="train-title ellipsis-2">{{item.brief}}</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<!-- 推荐 -->
				<view class="block">
					<view class="header">
						<span>推荐</span>
						<view class="more" @click="viewMore">查看更多</view>
					</view>
					<view class="category">
						<view class="category-item" :class="dataObj.homeObj.recommendCatalogIndex === idx ? 'selected' : ''" v-for="(item, idx) in dataObj.homeObj.recommendCatalogs" :key="item.id" @click="onCatalogsTap('homeObj.recommendCatalogIndex', idx)">{{item.title}}</view>
					</view>
					<view class="list">
						<view class="item" v-for="item in dataObj.homeObj.recommendList" :key="item.id" @click="onPageTap('recommend', item.id)">
							<image class="cover" :src="item.image_url"></image>
							<view class="title ellipsis-2">{{item.name}}</view>
							<view class="state intro">推荐{{dataObj.homeObj.recommendCatalogs[dataObj.homeObj.recommendCatalogIndex]['title']}}</view>
							<view class="time" v-if="dataObj.homeObj.recommendCatalogIndex == 0">{{item.class_count}}学时</view>
						</view>
					</view>
				</view>
				<!-- 试看 -->
				<!-- <view class="block">
					<view class="header">
						<span>试看</span>
						<view class="more" @click="viewMore('try')">查看更多</view>
					</view>
					<view class="category">
						<view class="category-item" :class="dataObj.homeObj.tryCatalogIdex === idx ? 'selected' : ''" v-for="(item, idx) in dataObj.homeObj.tryCatalogs" :key="item.id" @click="onCatalogsTap('homeObj.tryCatalogIdex', idx)">{{item.title}}</view>
					</view>
					<view class="list">
						<view class="item" v-for="item in dataObj.homeObj.tryList" :key="item.id" @click="onPageTap('online', item.id)">
							<image class="cover" :src="item.image_url"></image>
							<view class="title ellipsis-2">{{item.name}}</view>
							<view class="state play">试看</view>
							<view class="time">{{item.class_count}}学时</view>
						</view>
					</view>
				</view> -->
			</swiper-item>
			
			<!-- 在线课 -->
			<swiper-item class="body-swiper-item">
				<view class="scroll">
					<view class="type">
						<view class="type-item" :class="dataObj.onlineObj.firstIndex === idx ? 'selected' : ''" v-for="(item, idx) in dataObj.onlineObj.firstLevel" :key="item.id" @click="onCatalogsTap('onlineObj.firstIndex', idx)">{{item.name}}</view>
					</view>
					<!-- 选择分类 -->
					<view class="block">
						<view class="header offline">
							<span>选择分类</span>
							<view class="select-type">
								<view class="select-type-item" :class="dataObj.onlineObj.secondIndex === idx ? 'selected' : ''" v-for="(item, idx) in dataObj.onlineObj.secondLevel" :key="item.id" @click="onCatalogsTap('onlineObj.secondIndex', idx)">{{item.name}}</view>
							</view>
						</view>
						<view class="list">
							<view class="item" v-for="item in dataObj.onlineObj.list" :key="item.id" @click="onPageTap('online', item.id)">
								<image class="cover" :src="item.image_url"></image>
								<view class="title ellipsis-2">{{item.name}}</view>
								<view class="state play">试看</view>
								<view class="time">{{item.time || '0'}}学时</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			
			<!-- 线下课 -->
			<swiper-item class="body-swiper-item">
				<view class="scroll">
					<view class="type">
						<view class="type-item" :class="dataObj.offlineObj.firstIndex === idx ? 'selected' : ''" v-for="(item, idx) in dataObj.offlineObj.firstLevel" :key="item.id" @click="onCatalogsTap('offlineObj.firstIndex', idx)">{{item.name}}</view>
					</view>
					<!-- 选择分类 -->
					<view class="block">
						<view class="header offline">
							<span>选择分类</span>
							<view class="select-type">
								<view class="select-type-item" :class="dataObj.offlineObj.secondIndex === idx ? 'selected' : ''" v-for="(item, idx) in dataObj.offlineObj.secondLevel" :key="item.id" @click="onCatalogsTap('offlineObj.secondIndex', idx)">{{item.name}}</view>
							</view>
						</view>
						<view class="list">
							<view class="item" v-for="item in dataObj.offlineObj.list" :key="item.id" @click="onPageTap('online', item.id)">
								<image class="cover" :src="item.image_url"></image>
								<view class="title ellipsis-2">{{item.name}}</view>
								<view class="state play">试看</view>
								<view class="time">{{item.time || '0'}}学时</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			
			<!-- 培训 -->
			<swiper-item class="body-swiper-item">
				<view class="scroll">
					<view class="type">
						<view class="type-item" :class="dataObj.trainObj.firstIndex === idx ? 'selected' : ''" v-for="(item, idx) in dataObj.trainObj.firstLevel" :key="item.id" @click="onCatalogsTap('trainObj.firstIndex', idx)">{{item.name}}</view>
					</view>
					<!-- 选择分类 -->
					<view class="block">
						<view class="header offline">
							<span>选择分类</span>
							<view class="select-type">
								<view class="select-type-item" :class="dataObj.trainObj.secondIndex === idx ? 'selected' : ''" v-for="(item, idx) in dataObj.trainObj.secondLevel" :key="item.id" @click="onCatalogsTap('trainObj.secondIndex', idx)">{{item.name}}</view>
							</view>
						</view>
						<view class="list">
							<view class="item" v-for="item in dataObj.trainObj.list" :key="item.id" @click="onPageTap('train', item.id)">
								<image class="cover" :src="item.image_url"></image>
								<view class="title ellipsis-2">{{item.name}}</view>
								<view class="state free">试看</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			
			<!-- 书籍 -->
			<swiper-item class="body-swiper-item">
				<view class="scroll">
					<view class="type">
						<view class="type-item ellipsis-1" :class="dataObj.bookObj.firstIndex === idx ? 'selected' : ''" v-for="(item, idx) in dataObj.bookObj.firstLevel" :key="item.id" @click="onCatalogsTap('bookObj.firstIndex', idx)">{{item.name}}</view>
					</view>
					<!-- 选择分类 -->
					<view class="block">
						<view class="header offline">
							<span>选择分类</span>
							<view class="select-type">
								<view class="select-type-item" :class="dataObj.bookObj.secondIndex === idx ? 'selected' : ''" v-for="(item, idx) in dataObj.bookObj.secondLevel" :key="item.id" @click="onCatalogsTap('bookObj.secondIndex', idx)">{{item.name}}</view>
							</view>
						</view>
						<view class="book-list">
							<view class="book-item" v-for="item in dataObj.bookObj.list" :key="item.id" @click="onPageTap('book', item.id)">
								<image class="cover" :src="item.image_url"></image>
								<view class="title ellipsis-1">{{item.name}}</view>
								<view class="content ellipsis-2">{{item.brief || '暂无简介'}}</view>
								<view class="price">¥ {{item.price || '0'}}</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			
		</swiper>
	</view>
</template>

<script>
	import { getDate } from '@/common/tools.js';
	import headerMain from '@/components/header/header-main.vue';
	import { requestErrorTip } from '@/common/tools.js';
	
	export default {
		components: {
			headerMain
		},
		data() {
			return {
				pageObj: {
					todayDate: getDate(),
					screenHeight: 0, // 记录屏幕高度
					tabIndex: 0,
					tabList: [
					// 	{
					// 	name: '首页',
					// 	key: 'homeObj'
					// }, {
					// 	name: '在线课',
					// 	key: 'onlineObj'
					// }, {
					// 	name: '线下课',
					// 	key: 'offlineObj'
					// }, {
					// 	name: '培训',
					// 	key: 'trainObj'
					// }, {
					// 	name: '书籍',
					// 	key: 'bookObj'
					// },
					]
				},
				dataObj: {
					// 首页
					homeObj: {
						// 广告图
						bannerList: [],
						// 公告
						noticeList: [],
						// 目录(培训服务)
						trainCatalogIndex: 0,
						// 培训服务列表
						trainList: [],
						// 目录(推荐)
						recommendCatalogIndex: 0,
						recommendCatalogs: [{
							id: 1,
							title: '课程'
						}, {
							id: 2,
							title: '培训'
						}],
						// 推荐列表
						recommendList: [],
						// 目录(试看)
						tryCatalogIdex: 0,
						tryCatalogs: [{
							id: 1,
							title: '课程',
							selected: true
						}, {
							id: 2,
							title: '培训',
							selected: false
						}],
						// 试看列表
						tryList: []
					},
					// 在线课
					onlineObj: {
						// 一级菜单
						firstIndex: 0,
						firstLevel: [],
						// 二级菜单
						secondIndex: 0,
						secondLevel: [{
							id: 1,
							name: '推荐'
						}, {
							id: 2,
							name: '热门'
						}],
						list: []
					},
					// 线下课
					offlineObj: {
						// 一级菜单
						firstIndex: 0,
						firstLevel: [],
						// 二级菜单
						secondIndex: 0,
						secondLevel: [{
							id: 1,
							name: '推荐'
						}, {
							id: 2,
							name: '热门'
						}],
						list: []
					},
					// 培训
					trainObj: {
						// 一级菜单
						firstIndex: 0,
						firstLevel: [],
						// 二级菜单
						secondIndex: 0,
						secondLevel: [{
							id: 1,
							name: '推荐'
						}, {
							id: 2,
							name: '热门'
						}],
						list: []
					},
					// 书籍
					bookObj: {
						// 一级菜单
						firstIndex: 0,
						firstLevel: [],
						// 二级菜单
						secondIndex: 0,
						secondLevel: [{
							id: 1,
							name: '热门'
						}],
						list: []
					}
				}
			}
		},
		onLoad() {
			this.initPage();
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket:true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus:["shareAppMessage","shareTimeline"]
			});
			// #endif
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.initPage();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 初始化页面
			initPage() {
				const index = this.pageObj['tabIndex'];
				this.dataObj['onlineObj']['list'] = []; // 在线课
				this.dataObj['offlineObj']['list'] = []; // 线下课
				this.dataObj['trainObj']['list'] = []; // 培训
				this.dataObj['bookObj']['list'] = []; // 书籍
				if(index) {
					this.handleBodyData();
				} else {
					this.getAllCat(); // 获取首页数据
					this.getHomeData(); // 获取全部推荐课程
					this.getCourseAllCat(); // 获取全部一级课程分类
					this.getTrainAllCat(); // 获取全部一级培训分类
					this.getBookAllCat(); // 获取全部一级书籍分类
					this.getBannerData(); // 轮播图
					this.getNoticeData(); // 公告
				}
				this.getScreenHeight();
			},
			// 获取屏幕高度，并设置swiper 的高度
			getScreenHeight () {
				uni.getSystemInfo({
				    success: res => {
						this.pageObj['screenHeight'] = res['screenHeight'] - 50; // 减去底部的50
				    }
				});
			},
			// 监听头部子组件的点击事件
			tabClick (index) {
				this.pageObj['tabIndex'] = index;
			},
			// 左右切换主体
			bodySwiperChange (event) {
				this.pageObj['tabIndex'] = event.detail.current;
				this.handleBodyData();
			},
			// 培训服务切换
			trainCatalogChange (event) {
				this.dataObj['homeObj']['trainCatalogIndex'] = event.detail.current;
			},
			// 页面跳转
			onPageTap(type, id) {
				if(type === 'recommend') {
					if (this.dataObj['homeObj']['recommendCatalogIndex'] === 0) {
						// 课程
						type = 'online';
					} else {
						// 培训
						type = 'train';
					}
				}
				const pageUrl = {
					online: '/pages/detail/online?id=', // 在线课程详情
					book: '/pages/detail/book?id=', // 书籍详情
					train: '/pages/detail/train?id=' // 培训详情
				};
				uni.navigateTo({
					url: pageUrl[type] + id
				});
			},
			// 查看更多
			viewMore () {
				const type = this.dataObj['homeObj']['recommendCatalogIndex'] === 0 ? 'course' : 'train';
				uni.navigateTo({
					url: './more-list?type=' + type
				});
			},
			// 目录类型
			onCatalogsTap (str, index) {
				if (!str) return;
				const arr = str.split('.'); // 通过 . 号，分割str 成数组
				if (arr.length !== 2) return;
				const firstKey = arr[0];
				const secondKey = arr[1];
				this.dataObj[firstKey][secondKey] = index;
				if (str === 'homeObj.trainCatalogIndex') return false;
				this.handleBodyData();
			},
			// 获取头部的key
			getFirstKey() {
				const index = this.pageObj['tabIndex'];
				return this.pageObj['tabList'][index]['key'];
			},
			// 处理主体切换数据
			handleBodyData() {
				const firstKey = this.getFirstKey();
				switch(firstKey) {
				case 'homeObj':
					// 首页
					this.getHomeData();
					break;
				case 'onlineObj':
				case 'offlineObj':
					// 课程
					this.getCourseData();
					break;
				case 'trainObj':
					// 培训
					this.getTrainData();
					break;
				case 'bookObj':
					// 书籍
					this.getBookData();
					break;
				default:
					break;
				}
			},
			// 获取首页数据
			getAllCat() {
				this.$Requset({
					url: this.$Api['home']['classify'],
					data: {},
					success: (res) => {
						this.pageObj.tabList = res.data.data
						console.log("res",res)
						// const { data, status } = res;
						// if (!status) {
						// 	return;
						// }
						// let list = res['data']['data']['data'] || [];
						// if (list.length > 0) {
						// 	that.page++;
						// 	that.column_list = that.column_list.concat(list);
						// } else {
						// 	requestErrorTip('toast', msg);
						// }
					},
					// complete: () => {
					// 	// setTimeout(function() {
					// 	// 	uni.hideLoading();
					// 	// 	that.loading = false;
					// 	// }, 500);
					// },
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 获取全部一级课程分类
			getCourseAllCat() {
				this.$Requset({
					url: this.$Api['course']['getallcat'],
					data: {},
					success: (res) => {
						const { data, status } = res;
						if (!status) {
							return;
						}
						for(let item of data) {
							if (item['name'].indexOf('线上') > -1) {
								// 在线课（一级菜单）
								this.dataObj['onlineObj']['firstLevel'] = item['child'];
							} else if (item['name'].indexOf('线下') > -1) {
								// 线下课（一级菜单）
								this.dataObj['offlineObj']['firstLevel'] = item['child'];
							}
						}
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 获取全部一级培训分类
			getTrainAllCat() {
				this.$Requset({
					url: this.$Api['train']['getallcat'],
					data: {},
					success: (res) => {
						const { data, status } = res;
						if (!status) {
							return;
						}
						// 培训服务（首页）
						this.dataObj['homeObj']['trainList'] = data || [];
						// 培训（一级菜单）
						this.dataObj['trainObj']['firstLevel'] = data || [];
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 获取全部一级书籍分类
			getBookAllCat() {
				this.$Requset({
					url: this.$Api['books']['getallcat'],
					data: {},
					success: (res) => {
						const { data, status } = res;
						if (!status) {
							return;
						}
						// 书籍（一级菜单）
						this.dataObj['bookObj']['firstLevel'] = data || [];
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 获取在线课程数据
			getCourseData() {
				const firstKey = this.getFirstKey(); // 获取头部的key
				const index = this.dataObj[firstKey]['firstIndex'] || 0;// 默认第一个id
				const parent_id = this.dataObj[firstKey]['firstLevel'][index]['id'] || '';
				const secondIndex = this.dataObj[firstKey]['secondIndex'] || 0;
				const type = this.dataObj[firstKey]['secondLevel'][secondIndex]['id'];
				if (!parent_id) return false;
				this.$Requset({
					url: this.$Api['course']['getcatidalllist'],
					data: {
						id: parent_id,
						type: type + 1 // 1：全部 2 ：推荐 3：热门
					},
					success: (res) => {
						const { data, status } = res;
						if (!status) {
							return;
						}
						this.dataObj[firstKey]['list'] = data['list'];
					},
					// complete: () => {
					// 	// setTimeout(function() {
					// 	// 	uni.hideLoading();
					// 	// 	that.loading = false;
					// 	// }, 500);
					// },
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 培训
			getTrainData() {
				const firstKey = this.getFirstKey(); // 获取头部的key
				const index = this.dataObj[firstKey]['firstIndex'] || 0;// 默认第一个id
				const parent_id = this.dataObj[firstKey]['firstLevel'][index]['id'] || '';
				const secondIndex = this.dataObj[firstKey]['secondIndex'] || 0;
				const type = this.dataObj[firstKey]['secondLevel'][secondIndex]['id'];
				if (!parent_id) return false;
				this.$Requset({
					url: this.$Api['train']['getcatidalllist'],
					data: {
						id: parent_id,
						type: type + 1 // 1：全部 2 ：推荐 3：热门
					},
					success: (res) => {
						const { data, status } = res;
						if (!status) {
							return;
						}
						this.dataObj[firstKey]['list'] = data['list'];
					},
					// complete: () => {
					// 	// setTimeout(function() {
					// 	// 	uni.hideLoading();
					// 	// 	that.loading = false;
					// 	// }, 500);
					// },
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 书籍
			getBookData() {
				const firstKey = this.getFirstKey(); // 获取头部的key
				const index = this.dataObj[firstKey]['firstIndex'] || 0;// 默认第一个id
				const parent_id = this.dataObj[firstKey]['firstLevel'][index]['id'] || '';
				const secondIndex = this.dataObj[firstKey]['secondIndex'] || 0;
				const type = this.dataObj[firstKey]['secondLevel'][secondIndex]['id'];
				if (!parent_id) return false;
				this.$Requset({
					url: this.$Api['books']['getcatidalllist'],
					data: {
						id: parent_id,
						type: type + 1 // 1：全部 2 ：推荐 3：热门
					},
					success: (res) => {
						const { data, status } = res;
						if (!status) {
							return;
						}
						this.dataObj[firstKey]['list'] = data['list'];
					},
					// complete: () => {
					// 	// setTimeout(function() {
					// 	// 	uni.hideLoading();
					// 	// 	that.loading = false;
					// 	// }, 500);
					// },
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 轮播图
			getBannerData() {
				this.$Requset({
					url: this.$Api['home']['bannerList'],
					data: {
						code: 'app_home_banner'
					},
					success: (res) => {
						const { data, status } = res;
						if (!status) {
							return;
						}
						this.dataObj['homeObj']['bannerList'] = data['list'];
					},
					// complete: () => {
					// 	// setTimeout(function() {
					// 	// 	uni.hideLoading();
					// 	// 	that.loading = false;
					// 	// }, 500);
					// },
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 公告
			getNoticeData() {
				this.$Requset({
					url: this.$Api['home']['noticelist'],
					data: {},
					success: (res) => {
						const { data, status } = res;
						if (!status) {
							return;
						}
						console.log('公告');
						this.dataObj['homeObj']['noticeList'] = data;
					},
					// complete: () => {
					// 	// setTimeout(function() {
					// 	// 	uni.hideLoading();
					// 	// 	that.loading = false;
					// 	// }, 500);
					// },
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 首页
			getHomeData() {
				const urlObj = [
					this.$Api['course']['getreconclass'], // 获取全部推荐课程
					this.$Api['train']['getpicktrain'] // 获取全部推荐培训
				];
				const index = this.dataObj.homeObj.recommendCatalogIndex;
				const reqUrl = urlObj[index];
				this.$Requset({
					url: reqUrl,
					data: {},
					success: (res) => {
						const { data, status } = res;
						if (!status) {
							return;
						}
						this.dataObj['homeObj']['recommendList'] = [];
						for (let i = 0; i < data['list'].length; i++) {
							// 只显示小于4个
							if (i < 4) {
								this.dataObj['homeObj']['recommendList'].push(data['list'][i]);
							} else {
								break;
							}
						}
					},
					fail: (err) => {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.home{
		box-sizing: border-box;
		.body-swiper{
			box-sizing: border-box;
			height: 100%;
			padding-top: 88rpx;
			&-item{
				overflow-y: scroll;
				overflow-x: hidden;
			}
		}
		.block{
			background-color: #fff;
			border-radius: 22rpx;
			margin-bottom: 18rpx;
			padding: 32rpx 36rpx;
			.header{
				line-height: 36rpx;
				font-size: 32rpx;
				color: #1A1A1A;
				.more{
					float: right;
					position: relative;
					line-height: 36rpx;
					font-size: 24rpx;
					color: #7F7F7F;
					padding-right: 32rpx;
				}
				.more::after{
					content: '';
					display: block;
					position: absolute;
					top: 0;
					right: 0;
					width: 36rpx;
					height: 32rpx;
					background-position: center;
					background-repeat: no-repeat;
					background-size: 26rpx 26rpx;
					background-image: url(../../static/images/common/arrow-right.png);
				}
			}
			.offline{
				line-height: 48rpx;
				margin-bottom: 32rpx;
			}
			.swiper-train{
				height: 372rpx;
				&-item{
					position: relative;
					width: 525rpx;
					font-size: 0;
					border-radius: 14rpx;
					.train-image{
						width: 525rpx;
						height: 217rpx;
						background-color: #EAEFF1;
						border-top-left-radius: 14rpx;
						border-top-right-radius: 14rpx;
					}
					.train-tips{
						position: absolute;
						top: 195rpx;
						left: 22rpx;
						width: 163rpx;
						height: 44rpx;
						line-height: 44rpx;
						font-size: 20rpx;
						text-align: center;
						color: #fff;
						background-color: #14213D;
						border-radius: 8rpx;
					}
					.train-title{
						height: 80rpx;
						line-height: 40rpx;
						font-size: 28rpx;
						padding: 36rpx 20rpx;
						border: 1rpx solid #EAEFF1;
						border-bottom-left-radius: 14rpx;
						border-bottom-right-radius: 14rpx;
					}
				}
			}
			.category{
				font-size: 0;
				padding: 18rpx 0 32rpx;
				height: 56rpx;
				overflow-x: scroll;
				white-space: nowrap;
				&::-webkit-scrollbar {
					display: none;
				}
				&-item{
					display: inline-block;
					line-height: 32rpx;
					font-size: 24rpx;
					color: #7F7F7F;
					background-color: #F7F7F7;
					padding: 10rpx 38rpx;
					border-radius: 26rpx;
					margin-right: 12rpx;
					&:nth-last-child(1){
						margin-right: 0;
					}
				}
				.selected{
					color: $color-common;
					background-color: rgba($color: #FE6B00, $alpha: 0.1);
				}
			}
			.list{
				font-size: 0;
				.item{
					display: inline-block;
					width: 326rpx;
					margin-bottom: 24rpx;
					&:nth-child(2n){
						float: right;
					}
					.cover{
						width: 100%;
						height: 182rpx;
						border-radius: 14rpx;
						background-color: #eee;
						margin-bottom: 14rpx;
					}
					.title{
						height: 64rpx;
						line-height: 32rpx;
						font-size: 24rpx;
						color: #1A1A1A;
						margin-bottom: 2rpx;
					}
					.state{
						position: relative;
						display: inline-block;
						width: 60%;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 22rpx;
						padding-left: 40rpx;
						&::before{
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							width: 40rpx;
							height: 40rpx;
							background-position: center;
							background-repeat: no-repeat;
							background-size: 26rpx 26rpx;
						}
					}
					.intro{
						color: #FE6B00;
						&::before{
							background-image: url(../../static/images/home/recommend.png);
						}
					}
					.play{
						color: #7F7F7F;
						&::before{
							background-image: url(../../static/images/home/play.png);
						}
					}
					.free{
						color: #1BB682;
						&::before{
							background-image: url(../../static/images/home/free.png);
						}
					}
					.time{
						display: inline-block;
						width: 80rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 22rpx;
						color: #7F7F7F;
						text-align: right;
					}
				}
			}
		}
		.no-top-radius{
			border-top-left-radius: 0;
			border-top-right-radius: 0;
		}
		// 轮播图
		.swiper-image{
			width: 678rpx;
			height: 254rpx;
			border-radius: 14rpx;
			background-color: #eee;
			margin: 0 auto 32rpx;
		}
		// 公告
		.notice{
			height: 72rpx;
			.date{
				float: left;
				box-sizing: border-box;
				width: 152rpx;
				height: 72rpx;
				line-height: 24rpx;
				font-size: 20rpx;
				color: #fff;
				text-align: center;
				padding: 50rpx 20rpx 0 40rpx;
				margin-right: 14rpx;
				background-position: center;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-image: url(../../static/images/home/notice-date.png);
			}
			// 轮播图
			.swiper-text{
				float: left;
				width: 510rpx;
				height: 72rpx;
				line-height: 36rpx;
				font-size: 30rpx;
				color: #373737;
				&-item{
					position: relative;
					padding-left: 20rpx;
					&::before{
						content: '';
						position: absolute;
						top: 50%;
						margin-top: -4rpx;
						left: 0;
						width: 8rpx;
						height: 8rpx;
						border-radius: 50%;
						background-color: #373737;
					}
				}
			}
		}
		.scroll{
			position: absolute;
			top: 72rpx;
			left: 0;
			right: 0;
			bottom: 0;
			padding-top: 18rpx;
			overflow-y: scroll;
		}
		.type{
			position: fixed;
			z-index: 99;
			top: 0;
			left: 0;
			width: 100%;
			height: 72rpx;
			font-size: 0;
			overflow-x: scroll;
			white-space: nowrap;
			background-color: #fff;
			margin-bottom: 18rpx;
			border-bottom: 1rpx solid #F7F7F7;
			&::-webkit-scrollbar {
				display: none;
			}
			.type-item{
				display: inline-block;
				width: 25%;
				height: 72rpx;
				line-height: 72rpx;
				font-size: 28rpx;
				color: #7F7F7F;
				text-align: center;
			}
			.selected{
				color: $color-common;
			}
		}
		.select-type{
			float: right;
			height: 48rpx;
			font-size: 0;
			&-item{
				display: inline-block;
				width: 88rpx;
				height: 48rpx;
				line-height: 48rpx;
				font-size: 22rpx;
				color: #7F7F7F;
				background-color: #F7F7F7;
				border-radius: 24rpx;
				text-align: center;
				margin-right: 13rpx;
				&:nth-last-child(1) {
					margin-right: 0;
				}
			}
			.selected{
				color: $color-common;
				background-color: rgba($color: #FE6B00, $alpha: 0.1);
			}
		}
		.book-list{
			.book-item{
				position: relative;
				height: 180rpx;
				background-color: #F7F7F7;
				border-radius: 14rpx;
				padding: 20rpx 20rpx 20rpx 186rpx;
				margin-bottom: 32rpx;
				&:nth-last-child(1){
					margin-bottom: 0;
				}
				.cover{
					position: absolute;
					top: 20rpx;
					left: 20rpx;
					width: 145rpx;
					height: 180rpx;
					border-radius: 10rpx;
					background-color: #eee;
				}
				.title{
					line-height: 40rpx;
					font-size: 30rpx;
					color: #1A1A1A;
					margin-bottom: 6rpx;
				}
				.content{
					height: 64rpx;
					line-height: 32rpx;
					font-size: 22rpx;
					color: #7F7F7F;
					margin-bottom: 16rpx;
				}
				.price{
					line-height: 40rpx;
					font-size: 26rpx;
					color: $color-common;
				}
			}
		}
	}
	/deep/.header-main .tab-bar-item.is-active[data-v-6e3d1972] {
		font-size: 18px !important;
	}
</style>
